<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Jack的个人主页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
</head>

<body>
    <!-- Swiper -->
    <div class="nav_inner">
        <div class="nav_title">
            <img src="img/me.jpg" class="me_title" alt="">
            <div>
                <p>Jack</p>
                <p class="top_border">个人主页</p>
            </div>
        </div>
        <ul class="nav">
            <li><a href="">首页</a></li>
            <li><a href="">学习经历</a></li>
            <li><a href="">我的简历</a></li>
            <li><a href="">知识技能比例</a></li>
        </ul>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide warpper_one">

                <div class="title_me">
                    <p class="max_me">
                        <img src="img/me.jpg" alt="">
                    </p>
                    <p>
                        <span class="title_me_text">只要我们选择计算机那么我们的一生都在学习，学无止境！！</span>
                    </p>
                    <p>
                        <span>姓名：郑建科</span>
                    </p>
                    <p>
                        <span>20岁</span>
                    </p>
                    <p>
                        <span>前端开发工程师</span>
                    </p>
                    <p>
                        <span>手机：15930409152</span>
                    </p>
                    <p>
                        <span>QQ：2440920958</span>
                    </p>
                </div>

            </div>
            <div class="swiper-slide two-centent">
                <div class="two_content_title">
                    <p>关于我</p>
                    <span>-ABOUT ME-</span>
                </div>
                <ul class="information">
                    <li>
                        <div class="icon-box">
                            <img src="img/education.png" class="img-icon" alt="">
                            <span class="icon"></span>
                            <span class="icon-hover"></span>
                        </div>
                        <div class="text-box">
                            <span class="text-l">学历</span>
                            <span class="line"></span>
                            <span class="text-r">大专</span>
                        </div>
                    </li>
                    <li>
                        <div class="icon-box">
                            <img src="img/age.png" class="img-icon" alt="">
                            <span class="icon"></span>
                            <span class="icon-hover"></span>
                        </div>
                        <div class="text-box">
                            <span class="text-l">年龄</span>
                            <span class="line"></span>
                            <span class="text-r">20</span>
                        </div>
                    </li>
                    <li>
                        <div class="icon-box">
                            <img src="img/location.png" class="img-icon" alt="">
                            <span class="icon"></span>
                            <span class="icon-hover"></span>
                        </div>
                        <div class="text-box">
                            <span class="text-l">籍贯</span>
                            <span class="line"></span>
                            <span class="text-r">河北 邯郸</span>
                        </div>
                    </li>
                    <li>
                        <div class="icon-box">
                            <img src="img/status.png" class="img-icon" alt="">
                            <span class="icon"></span>
                            <span class="icon-hover"></span>
                        </div>
                        <div class="text-box">
                            <span class="text-l">目前</span>
                            <span class="line"></span>
                            <span class="text-r">在校</span>
                        </div>
                    </li>
                </ul>
                <div class="my-summary">
                    <span class="bg-icon1"></span>
                    <span class="bg-icon2"></span>
                    <p>2016年认识计算机行业，2018年喜欢上了前段工程师专业</p>
                    <p>2019年果断学习了全端工程师，这个专业</p>
                    <p>2019年12月正式成为了前端工程师</p>
                    <p>如今还在前端的岗业上</p>
                </div>
            </div>
            <div class="swiper-slide three-centent">
                <div class="three_content_title">
                    <p>专业技能</p>
                    <span>- SKILL -</span>
                </div>
                <div class="my-skill">
                    <p>2016年认识计算机行业，2017年认识上了前段工程师专业，并且接触了前端工程师的知识，2018年在泊头职业学院继续学习前端专业</p>
                    <p>并且开始把专业改成前端的决定去学习</p>
                </div>
                <div class="skill_data">
                    <div>
                        <img src="img/html.png" alt="">
                        <p class="skill_data_text">
                            <ul class="data-text">
                                <li>熟练Html标签的语意。</li>
                                <li>熟练Html标签语意。</li>
                                <li>深刻理解web标准。</li>
                                <li>熟练div+css、熟悉盒子模型和各种布局方式、能够根据设计图高效实现页面布局和交互效果。</li>
                                <li>精通ps、web页面开发。</li>
                            </ul>
                        </p>
                    </div>
                    <div>
                        <img src="img/css.png" alt="">
                        <p class="skill_data_text">
                            <ul class="data-text">
                                <li>熟练Html标签的语意。</li>
                                <li>熟练Html标签语意。</li>
                                <li>深刻理解web标准。</li>
                                <li>熟练div+css、熟悉盒子模型和各种布局方式、能够根据设计图高效实现页面布局和交互效果。</li>
                                <li>精通ps、web页面开发。</li>
                            </ul>
                        </p>
                    </div>
                    <div>
                        <img src="img/js.png" alt="">
                        <p class="skill_data_text">
                            <ul class="data-text">
                                <li>熟练Html标签的语意。</li>
                                <li>熟练Html标签语意。</li>
                                <li>深刻理解web标准。</li>
                                <li>熟练div+css、熟悉盒子模型和各种布局方式、能够根据设计图高效实现页面布局和交互效果。</li>
                                <li>精通ps、web页面开发。</li>
                            </ul>
                        </p>
                    </div>
                    <div>
                        <img src="img/ajax.png" alt="">
                        <p class="skill_data_text">
                            <ul class="data-text">
                                <li>熟练Html标签的语意。</li>
                                <li>熟练Html标签语意。</li>
                                <li>深刻理解web标准。</li>
                                <li>熟练div+css、熟悉盒子模型和各种布局方式、能够根据设计图高效实现页面布局和交互效果。</li>
                                <li>精通ps、web页面开发。</li>
                            </ul>
                        </p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide four-centent">
                <div class="four_content_title">
                    <p>专业技能</p>
                    <span>- SKILL -</span>
                </div>
                <div class="data-link">
                    <div class="data-link-one">
                        <div class="kk">
                            <div class="link-one—title">HTML:</div>
                            <div class="link-two—title">
                                <p style="background: red; width: 95%; height: 25px;">95%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">Css:</div>
                            <div class="link-two—title">
                                <p style="background: yellow; width: 80%; height: 25px;">80%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">Javascript:</div>
                            <div class="link-two—title">
                                <p style="background: skyblue; width: 70%; height: 25px;">70%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">Jquery:</div>
                            <div class="link-two—title">
                                <p style="background: hotpink; width: 50%; height: 25px;">50%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">vue.js:</div>
                            <div class="link-two—title">
                                <p style="background: springgreen; width: 40%; height: 25px;">40%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">Ajax:</div>
                            <div class="link-two—title">
                                <p style="background: teal; width: 60%; height: 25px;">60%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">Bootstrap:</div>
                            <div class="link-two—title">
                                <p style="background: blue; width: 70%; height: 25px;">70%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">swier:</div>
                            <div class="link-two—title">
                                <p style="background: brown; width: 70%; height: 25px;">70%</p>
                            </div>
                        </div>
                        <div class="kk">
                            <div class="link-one—title">Php:</div>
                            <div class="link-two—title">
                                <p style="background: khaki; width: 40%; height: 25px;">40%</p>
                            </div>
                        </div>
                    </div>
                    <div class="data-link-two">
                        <p>深刻理解web标准，熟悉HTML5新标签的语意，能合理利用语意标签布局页面；</p>
                        <p>熟悉css新特征属性相关用语，有一定的开发经验了解css预编译语言less/sass；</p>
                        <p>熟悉JavaScript语言</p>
                        <p>熟练掌握jqurey</p>
                        <p>正在学习目前没有开发经验</p>
                        <p>熟悉JavaScript、Ajax、Json、DOM等前端技术，熟练掌握应用ajax技术与后端数据进行交互处理</p>
                        <p>熟练掌握bootstrip框架及源码的使用方式</p>
                        <p>熟练swiper框架开发轮播图等效果</p>
                        <p>熟悉简单的PHP语句</p>
                    </div>
                </div>
            </div>
            <div class="swiper-slide five-centent">
                <div class="four_content_title">
                    <h3>联系我</h3>
                    <span>- CONTSCT ME -</span>
                </div>
                <h2>灵感 代码 梦想 未来</h2>
                <h3><span style="color: red;">INSPIRATION</span><span style="color: blue;">CODE</span><span style="color:green;">DREAM</span><span style="color: red;">FUTURE</span></h3>
                <p>互联网是个奇妙的行业</p>
                <p>身为前端工程师，跟贴近用户，这种体验非常美妙</p>
                <p>我热爱互联网，更热爱互联网前段技术，</p>
                <p>三人行，必有我师焉</p>
                <p>让我们在互联网的浪潮里不断成长</p>
                <p>手机：15930409152</p>
                <p>QQ：2440920958</p>
                <div class="footer-inner">
                    <p>Copyright© 2015 - 2026 Jack2019.com 所有ICP备********号</p>
                </div>
            </div>
           
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.min.js"></script>
    <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
    <script src="js/script.js"></script>
</body>

</html>